<template>
  <div class="account-setting-base">
    <div class="setting-content">
      <div class="layout-item right">
        <div class="setting-info-title">
          <span>全局样式</span>
        </div>
        <div class="setting-info">
          <div class="setting-info-content">
            <div class="drawer-item">
              <span>主题色</span>
              <div class="seeting_item">
                <el-color-picker
                  :predefine="predefineColors"
                  v-model="themeVal"
                  size="mini"
                  class="theme-picker"
                  popper-class="theme-picker-dropdown"
                ></el-color-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="setting-info">
          <div class="setting-info-content">
            <div class="drawer-item">
              <span>主&nbsp;&nbsp;&nbsp;&nbsp;题</span>
              <div class="seeting_item">
                <el-radio-group v-model="text">
                  <el-radio
                    :label="item.value"
                    v-for="(item,index) in list"
                    :key="index"
                  >{{ item.name }}</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
        <div class="setting-info">
          <div class="setting-info-content">
            <div class="drawer-item">
              <span>全&nbsp;&nbsp;&nbsp;&nbsp;屏</span>
              <div class="seeting_item">
                <el-link
                  class="el-icon-full-screen"
                  @click="fullScreenClick"
                  :underline="false"
                  style="font-size:28px"
                ></el-link>
              </div>
            </div>
          </div>
        </div>
        <div class="setting-info">
          <div class="setting-info-content">
            <div class="drawer-item">
              <span>锁&nbsp;&nbsp;&nbsp;&nbsp;屏</span>
              <div class="seeting_item">
                <lock />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eleColor from "@/mixins/eleColor";
import themeName from "@/mixins/themeName";
import lock from "./lock.vue";
import { fullscreenToggel } from "@/util/util.js";

export default {
  mixins: [eleColor(), themeName()],
  data() {
    return {};
  },
  components: {
    lock
  },
  methods: {
    fullScreenClick() {
      fullscreenToggel();
    }
  }
};
</script>
<style scoped lang="less">
.account-setting-base {
  .wrapper-main {
    padding-left: 0;
  }

  .setting-content {
    display: flex;
    flex-direction: row;

    .right {
      flex: 1 1 0;
      padding: 8px 40px;

      .setting-info-title {
        font-size: 20px;
      }

      .setting-info {
        display: flex;
        flex-direction: row;
        padding-top: 12px;

        &-content {
          width: 320px;
        }

        &-avatar {
          padding-left: 104px;
          display: flex;
          flex-direction: column;

          .avatar {
            margin-top: 12px;
          }

          .avatar-uploader {
            width: 115px;
            margin: 24px auto;
          }
        }
        .drawer-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
